<!-- 师傅评价列表 -->
<template>
  <div style="background-color: #EFF1F2;">
      <!-- line -->
      <div style="height: 16px;"></div>
      <!-- master info -->
      <div style="background-color: white;padding: 12px 16px;margin: 0 12px;">
          <!-- title -->
          <div style="display: flex;">
              <div style="height: 20px;width: 4px;margin-right: 12px;background: linear-gradient(#2456E0,#24ADE0);border-radius: 4px;"></div>
              <div style="font-size: 18px;font-weight: bold;">{{title}}信息</div>
          </div>

          <div style="flex: 1;padding: 0 12px;">
              <div style="margin-top: 12px;display: flex;">
                  <el-image style="width: 90px; height: 90px;border-radius: 27px;" :src="userInfo.avatar">
                  </el-image>
                  <div style="flex: 1;padding-left: 12px;">
                      <el-descriptions column="1" size="medium" labelStyle="font-size: 14px;font-weight: bold;">
                          <el-descriptions-item label="姓名">
                            {{ userInfo.username }}
                          </el-descriptions-item>
                          <el-descriptions-item label="个人技能">{{ userInfo.roleType }}</el-descriptions-item>
                          <el-descriptions-item label="地址">{{ userInfo.address }}</el-descriptions-item>
                      </el-descriptions>
                  </div>
                  <div style="flex: 1;padding-left: 12px;">
                      <el-descriptions column="1" size="medium" labelStyle="font-size: 14px;font-weight: bold;">
                          <el-descriptions-item label="接单次数">{{ userInfo.orderTakeCount || 0 }}</el-descriptions-item>
                          <el-descriptions-item label="接单金额">{{ userInfo.earnCount }}</el-descriptions-item>
                          <el-descriptions-item label="保证金">--</el-descriptions-item>
                      </el-descriptions>
                  </div>
              </div>
          </div>
      </div>

      <div style="height: 16px;"></div>
      <!-- list -->
      <div style="background-color: white;padding: 20px;" v-for="(item, index) in userCommentInfo" :key="index">
          <div style="display: flex;align-items: center;">
              <div style="font-size: 18px;font-weight: bold;">{{ item.productName }}</div>
              <div style="color: red;margin-left: 100px;">{{ item.price || 0 }}</div>
          </div>
          <div style="color: #999999;font-size: 14px;margin-top: 12px;">服务类别：{{ item.price }}</div>
          <div style="display: flex;align-items: flex-end;margin-top: 12px;">
              <el-image style="width: 32px;height: 32px;border-radius: 27px;" :src="item.userHeadImg"></el-image>
              <div style="color: #666666;margin-left: 5px;font-size: 16px;">{{ item.userNameSt }}</div>
          </div>
          <div style="color: #333333;font-size: 16px;margin-top: 12px;font-weight: bold;">{{ item.content }}</div>
          <div style="display: flex;flex-wrap: wrap;margin-top: 12px;" v-if="item.attements">
              <el-image style="width: 160px;height: 160px;border-radius: 27px;margin-right: 12px;" v-for="(obj, idx) in getImageList(item.attements)" :key="idx" :src="obj"></el-image>
          </div>
          <div style="height: 0.5px;background-color: #ebebeb;margin-top: 12px;"></div>
      </div>


  </div>
</template>

<script>
export default {
  name: 'masterCommentDetail',
  props: {
    userCommentInfo: [],
    title: String,
    userInfo: {}
  },
  components: {
  },
  data() {
    return {
      btnicon:require('@/assets/master-comments-btn.png'),
      activeName: 'first',
      name: '我要下单'
    }
  },
  mounted() {
  },
  methods: {
    getImageList(imgStr) {
      if (typeof imgStr == 'string') {
        const imgList = imgStr.split(',');
        return imgList;
      }
      return []
    }
  }
}
</script>

<style>
.deleteBorder .el-tabs__nav-wrap::after{
    height: 0;
  }
</style>
